<div class="create-team-progress">
  <md-progress-linear md-mode="indeterminate" ng-show="listTeamMembersController.isLoading"></md-progress-linear>
</div>
<md-content flex>
  <che-list-header che-input-placeholder="Search"
                   che-search-model="listTeamMembersController.memberFilter.name"
                   che-on-search-change="listTeamMembersController.onSearchChanged(str)"
                   che-hide-search="listTeamMembersController.members.length === 0"
                   che-add-button-title="Add Member"
                   che-on-add="listTeamMembersController.showMemberDialog(null)"
                   che-hide-add="!listTeamMembersController.editable"
                   che-delete-button-title="Delete"
                   che-on-delete="listTeamMembersController.removeSelectedMembers()"
                   che-hide-delete="listTeamMembersController.cheListHelper.isNoItemSelected"
                   che-hide-header="listTeamMembersController.cheListHelper.visibleItemsNumber === 0">
    <div flex="100"
         layout="row"
         layout-align="start stretch"
         class="che-list-item-row">
      <div layout="column" layout-gt-xs="row" ng-if="listTeamMembersController.editable"
           layout-align="start center"
           class="che-checkbox-area">
        <div layout="row" layout-align="center center" class="che-list-item-checkbox-main">
          <md-checkbox class="che-list-item-checkbox"
                       aria-label="Member list"
                       ng-checked="listTeamMembersController.cheListHelper.areAllItemsSelected"
                       ng-click="listTeamMembersController.cheListHelper.changeBulkSelection()"></md-checkbox>
        </div>
      </div>
      <div flex hide-xs layout-gt-xs="row"
           layout-align="start center"
           class="che-list-item-details">
        <che-list-header-column flex-gt-xs="25"
                                che-sort-value='listTeamMembersController.memberOrderBy'
                                che-sort-item='email'
                                che-column-title='Email'></che-list-header-column>
        <che-list-header-column flex-gt-xs="25"
                                che-sort-value='listTeamMembersController.memberOrderBy'
                                che-sort-item='name'
                                che-column-title='Info'></che-list-header-column>
        <che-list-header-column flex-gt-xs="35"
                                che-sort-value='listTeamMembersController.memberOrderBy'
                                che-column-title='Roles'></che-list-header-column>
       <!-- <che-list-header-column flex-gt-xs="10"
                                che-sort-value='listTeamMembersController.memberOrderBy'
                                che-column-title='State'></che-list-header-column>-->
        <che-list-header-column flex-gt-xs="15"
                                che-column-title='Actions'></che-list-header-column>
      </div>
    </div>
  </che-list-header>
  <che-list ng-show="listTeamMembersController.cheListHelper.visibleItemsNumber > 0">
    <member-item ng-repeat="member in listTeamMembersController.cheListHelper.getVisibleItems() | orderBy:[listTeamMembersController.memberOrderBy, 'name']"
                 callback="listTeamMembersController"
                 editable="listTeamMembersController.editable"
                 is-owner="listTeamMembersController.memberIsOwner(member)"
                 member="member"></member-item>
  </che-list>
  <div class="che-list-empty">
    <span ng-show="listTeamMembersController.members.length > 0 && listTeamMembersController.cheListHelper.visibleItemsNumber === 0">
          No members found.
    </span>
    <span ng-show="listTeamMembersController.members.length === 0">There are no members.</span>
  </div>
</md-content>
